import React, { Component } from 'react'

import Footer from './Footer'
import List from './List'
import Navbar from './Navbar'

import './App.css'

export default class App extends Component {
  state = {
    todos: [
      { id: 0, name: '睡觉', checked: true },
      { id: 1, name: '吃饭', checked: true },
      { id: 2, name: '打代码', checked: false }
    ]
  }
  updataTodo = (checked, id) => {
    const { todos } = this.state
    const newtodos = todos.map(todo => {
      if (todo.id === id) return { ...todo, checked }
      else return todo
    })
    this.setState({ todos: newtodos })
  }
  addTodos = (name) => {
    const { todos } = this.state
    let id = this.state.todos.length
    let newtodos = { id, name, checked: false }
    this.setState({ todos: [newtodos, ...todos] })
  }

  checkedAllTodo = (checked) => {
    const { todos } = this.state;
    let newtodos = todos.map(todo => {
      return { ...todo, checked }
    })
    this.setState({ todos: newtodos })
  }

  delectTodo = (id) => {
    const { todos } = this.state;
    const newtodo = todos.filter(todo => {
      return todo.id !== id;
    })
    this.setState({ todos: newtodo })
  }
  delectChecked = () => {
    const { todos } = this.state;
    const newtodo = todos.filter(todo => {
      return todo.checked ===false 
    })
    this.setState({todos:newtodo})
  }
  render() {
    return (
      <div className="app">
        <Navbar addTodos={this.addTodos} />
        <List todos={this.state.todos} updataTodo={this.updataTodo} delectTodo={this.delectTodo} />
        <Footer todos={this.state.todos} checkedAllTodo={this.checkedAllTodo} delectChecked={this.delectChecked}/>
      </div>
    )
  }
}
